<template>
	<view class="wrapper">
		<view class="handBtn">
			<view class="slide-wrapper">
				<text>选择粗细</text>
				<slider @change="updateValue" value="50" block-size="20" show-value class="slider" step="25" />
			</view>
			<view class="color">
				<text>选择颜色</text>
				<image @click="selectColorEvent('black')"
					:src="selectColor === 'black' ? '../../static/images/color_black_selected.png' : '../../static/images/color_black.png'"
					:class="selectColor === 'black' ? 'color_select' : ''" class="color-normal"></image>
				<image @click="selectColorEvent('red')"
					:src="selectColor === 'red' ? '../../static/images/color_red_selected.png' : '../../static/images/color_red.png' "
					:class="selectColor === 'red' ? 'color_select' : ''" class="color-normal"></image>
			</view>
		</view>
		<view class="handCenter">
			<canvas class="handWriting" disable-scroll="true" @touchstart="uploadScaleStart"
				@touchmove="uploadScaleMove" @touchend="uploadScaleEnd" @tap="mouseDown" canvas-id="handWriting">
			</canvas>
		</view>
		<view class="showImg">
			<image v-if="showImg" :src="showImg" mode=""></image>
			<text v-else>图片展示</text>
		</view>
		<view class="buttons">
			<button @click="resetDraw" class="delBtn">重写</button>
			<button @click="subCanvas" class="subBtn">保存</button>
		</view>
	</view>
</template>

<script>
	import Handwriting from "@/static/libs/signature.js"
	import { file } from '@/utils/common.js'
	
	export default {
		data() {
			return {
				emitKey: '',
				lineColor: 'black',
				slideValue: 50,
				handwriting: '',
				selectColor: 'black',
				color: '',
				showImg: ''
			}
		},
		onLoad(option) {
			this.emitKey = option.emitKey
			this.$nextTick(()=>{
				this.handwriting = new Handwriting({
					lineColor: this.lineColor,
					slideValue: this.slideValue, // 0, 25, 50, 75, 100
					canvasName: 'handWriting',
				})
			})
		},
		methods: {
			// 选择画笔颜色
			selectColorEvent(event) {
				this.selectColor = event;
				if (event == 'black') {
					this.color = '#1A1A1A'
				} else if (event == 'red') {
					this.color = '#ca262a'
				}
				this.handwriting.selectColorEvent(this.color)
			},
			// 笔迹粗细滑块
			updateValue(e) {
				this.slideValue = e.detail.value;
				this.handwriting.selectSlideValue(this.slideValue);
			},
			uploadScaleStart(event) {
				this.handwriting.uploadScaleStart(event)
			},
			uploadScaleMove(event) {
				this.handwriting.uploadScaleMove(event)
			},
			uploadScaleEnd(event) {
				this.handwriting.uploadScaleEnd(event)
			},
			resetDraw() {
				this.showImg = ""
				this.handwriting.retDraw()
			},
			subCanvas() {
				this.handwriting.saveCanvas().then(res => {
					this.showImg = res;
					this.uploadFile(res)
				}).catch(err => {
					console.log(err);
				});
			},
			async uploadFile(item) {
				const _this = this
				file.uploadFile(item, []).then(res => {
					const addFile = {
						"id": res.id,
						"name": res.fileName,
						"ext": res.ext,
						"fileType": file.getFileType(res),
						"size": res.totalBytes
					}
					uni.$emit(emitKey, addFile)
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style scoped="true">
	.wrapper {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: column;
		justify-content: center;
		font-size: 28upx;
	}

	.handBtn {
		padding: 20upx 5%;
		display: flex;
		flex-direction: column;
	}
	
	.slide-wrapper {
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
	}
	
	.slider {
		width: 400upx;
		padding-left: 10upx;
	}
	
	.color {
		display: flex;
		align-items: center;
	}
	
	.color>text {
		margin-right: 40upx;
	}

	.color-normal {
		width: 60upx;
		height: 60upx;
	}
	
	.color-normal.color_select {
		width: 100upx;
		height: 100upx;
	}

	.handCenter {
		border: 4upx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
		width: 90%;
		margin: 0 auto;
	}
	
	.handWriting {
		background: #fff;
		width: 100%;
		height: 350upx;
	}

	.showImg {
		border: 4upx solid #e9e9e9;
		overflow: hidden;
		width: 90%;
		margin: 0 auto;
		background: #eee;
		height: 350upx;
		margin-top: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.showImg>image {
		width: 100%;
		height: 100%;
	}

	.showImg>text {
		font-size: 40upx;
		color: #888;
	}
	
	.buttons {
		width: 100%;
		margin-top: 40upx;
		display: flex;
		justify-content: space-between;
	}
	
	.buttons>button {
		font-size: 30upx;
		height: 80upx;
		width: 200upx;
	}
	
	.delBtn {
		color: #666;
	}
	
	.subBtn {
		background: #008ef6;
		color: #fff;
	}
</style>
